<template>
  <div>
    <el-table
      ref="filterTable"
      :data="List"
      @filter-change="filterChange"
      style="width: 100%"
      v-loading="listLoading"
    >
     <el-table-column label="用户手机号" align="center"  width="150">
      <template slot-scope="scope">  
        <span>{{ scope.row.userPhone.substr(0, 3) + '****' + scope.row.userPhone.substr(-4) }}</span>  
      </template>  
    </el-table-column> 
     <el-table-column label="消费类型" align="center" prop="deductionType" width="100"
                       :formatter="val => this.formatOptions(val, this.balanceTypeOptions, `deductionType`, `dictValue`, `dictLabel`)"
                       :filter-multiple="false" :filters="balanceTypeOptions" column-key="deductionType"/>
      <el-table-column label="换电订单号" align="center" prop="orderId"/>
      <el-table-column label="卡券订单号" align="center" prop="vipOrderId"/>
      <el-table-column label="操作前余额" align="center" prop="userBalance" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.userBalance }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作后余额" align="center" prop="residualAmount" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.residualAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="变化余额" align="center" prop="deductionAmount" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.deductionAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="c1" style="height:10px"></div>
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.page"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
  import {listDetail} from "@/api/zq/deductionDetails";

  export default {
    name: "collectionShop",
    data() {
      return {
        List: [],
        total: 0,
        deductionType: '',//消费类型
        userPhone: '',
        listLoading: true,
        // 1扣款，2增加字典
        balanceTypeOptions: [],
        // 交易方式
        tradingTypeOptions: [],
        listQuery: {
          page: 1,
          limit: 10,
        },
      };
    },
    created() {
      this.getDicts("deduction_type").then(response => {
        this.balanceTypeOptions = response.data;
        this.balanceTypeOptions.map((item) => {
          let key1 = 'value'
          let value1 = item.dictLabel
          let key2 = 'text'
          let value2 = item.dictLabel
          item[key1] = value1
          item[key2] = value2
        })
      });
      this.getDicts("variation_type").then(response => {
        this.tradingTypeOptions = response.data;
      });
    },
    methods: {
      // 筛选支付状态
      filterChange(column) {
        let arr = this.balanceTypeOptions.find((element) => (element.text == column.deductionType[0]));
        if (arr) {
          this.deductionType = arr.dictValue
          this.getData(10, 1, this.userPhone, this.deductionType);
        } else {
          this.getData(10, 1, this.userPhone);
        }
      },
      // 清除所有过滤器
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      getData(pageSize, pageNum, userPhone, deductionType) {
        this.listLoading = true
        this.userPhone = userPhone
        this.deductionType = deductionType
        let app = {
          pageSize: pageSize, //分页数量
          pageNum: pageNum, //分页页码
          userPhone: this.userPhone,
          deductionType: this.deductionType
        };
        listDetail(app).then((response) => {
          this.List = response.rows;
          this.total = response.total;
          this.listLoading = false
        });
      },
      resetDateFilter() {
        this.$refs.filterTable.clearFilter("date");
      },
      formatter(row, column) {
        return row.createTime;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column["property"];
        return row[property] === value;
      },
      handleSizeChange(val) {
        var that = this;
        that.listQuery.limit = val;
        that.getData(that.listQuery.limit, that.listQuery.page, that.userPhone, that.deductionType);
      },
      handleCurrentChange(val) {
        var that = this;
        that.listQuery.page = val;
        that.getData(that.listQuery.limit, that.listQuery.page, that.userPhone, that.deductionType);
      },
    },
  };
</script>
<style scoped></style>
